<template>
  <div class="overview-card" :class="{ 'up': growth > 0, 'down': growth < 0 }">
    <div class="card-icon">
      <i :class="['fas', `fa-${icon}`]"></i>
    </div>
    <div class="card-content">
      <h3 class="card-title">{{ title }}</h3>
      <div class="card-data">{{ formattedValue }}</div>
      <div class="card-growth" v-if="showGrowth">
        <i class="fas" :class="growth >= 0 ? 'fa-arrow-up' : 'fa-arrow-down'"></i>
        <span>{{ Math.abs(growth).toFixed(2) }}%</span>
        <span class="period">{{ period }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  icon: string;
  title: string;
  value: number | string;
  growth?: number;
  period?: string;
  prefix?: string;
  suffix?: string;
  showGrowth?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  growth: 0,
  period: '同比',
  prefix: '',
  suffix: '',
  showGrowth: true
});

// 格式化显示的值
const formattedValue = computed(() => {
  const valueStr = typeof props.value === 'number' 
    ? props.value.toLocaleString() 
    : props.value;
  return `${props.prefix}${valueStr}${props.suffix}`;
});
</script>

<style scoped>
.overview-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #5e72e4;
  transition: all 0.3s ease;
}

.overview-card.up::before {
  background-color: #2dce89;
}

.overview-card.down::before {
  background-color: #f5365c;
}

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(94, 114, 228, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #5e72e4;
  font-size: 22px;
}

.up .card-icon {
  background-color: rgba(45, 206, 137, 0.1);
  color: #2dce89;
}

.down .card-icon {
  background-color: rgba(245, 54, 92, 0.1);
  color: #f5365c;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #8898aa;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.card-data {
  font-size: 24px;
  font-weight: 700;
  color: #32325d;
  margin-bottom: 4px;
}

.card-growth {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.up .card-growth {
  color: #2dce89;
}

.down .card-growth {
  color: #f5365c;
}

.period {
  color: #8898aa;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .overview-card {
    padding: 16px;
  }
  
  .card-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
  
  .card-data {
    font-size: 20px;
  }
}
</style> 
 